<template>
  <div class="query">
    <h1 class="title">查询户室信息</h1>
    <p class="subTitle">帮你快速查询户室信息</p>
    <div class="wrapper">
      <mt-navbar v-model="selected">
        <mt-tab-item id="1">户室查询</mt-tab-item>
        <mt-tab-item id="2">手机号查询</mt-tab-item>
        <mt-tab-item id="3">姓名查询</mt-tab-item>
      </mt-navbar>

      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <div class="wrapper-search">
            <p class="content-title">{{ villageName }}</p>
            <!-- <div class="button1">
              <div
                style="width: 100%; position: relative;"
                @click="searchBuild"
              >
                <input
                  type="text"
                  id="txt"
                  style="padding-left: 10px;padding-right: 20px; box-sizing: border-box;outline: none; background:#fff; border: 1px solid #707070;  width: 100%;  height: 100%; border-radius: 24.25px;"
                  placeholder="栋"
                  readonly
                  v-model="form.buildingNo"
                  maxlength="10"
                />
                <img
                  style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 6px;  transform: translateY(-50%); "
                  src="../assets/更多@2x.png"
                />
              </div>

              <div style="width: 100%; position: relative;" @click="searchUnit">
                <input
                  type="text"
                  id="txt"
                  style="padding-left: 10px;padding-right: 20px; box-sizing: border-box;outline: none; background:#fff; border: 1px solid #707070;  width: 100%;  height: 100%; border-radius: 24.25px;"
                  placeholder="单元"
                  readonly
                  maxlength="10"
                  v-model="form.unitNo"
                />
                <img
                  style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 6px;  transform: translateY(-50%); "
                  src="../assets/更多@2x.png"
                />
              </div>

              <div
                style="width: 100%; position: relative;"
                @click="searchHourse"
              >
                <input
                  type="text"
                  id="txt"
                  style="padding-left: 10px;padding-right: 20px; box-sizing: border-box;outline: none; background:#fff; border: 1px solid #707070;  width: 100%; height: 100%; border-radius: 24.25px;"
                  placeholder="户室"
                  readonly
                  maxlength="10"
                  v-model="form.houseNumber"
                />
                <img
                  style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 6px;  transform: translateY(-50%); "
                  src="../assets/更多@2x.png"
                />
              </div>
            </div> -->

            <div class="button " @click="searchBuild">
              <input
                type="text"
                placeholder="选择楼栋"
                class="input-button"
                v-model="form.buildingNo"
                readonly
              />
              <img
                style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); "
                src="../assets/更多@2x.png"
              />
            </div>

            <div class="button " @click="searchUnit">
              <input
                type="text"
                placeholder="选择单元"
                class="input-button"
                v-model="form.unitNo"
                readonly
              />
              <img
                style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); "
                src="../assets/更多@2x.png"
              />
            </div>

            <div class="button" @click="searchHourse">
              <input
                class="input-button"
                type="text"
                placeholder="选择户室"
                readonly
                v-model="form.houseNumber"
              />
              <img
                style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); "
                src="../assets/更多@2x.png"
              />
            </div>

            <button
              style="width: 100%; background: #F4D554; outline: none; border: none; height: 2.8125rem;border-radius: 1.4rem; color: #333; font-weight: bold; font-size: 1.125rem; margin-top: 0.64375rem;"
              type="button"
              @click="search"
            >
              立即查询
            </button>
          </div>
        </mt-tab-container-item>

        <mt-tab-container-item id="2">
          <div class="wrapper-search">
            <p class="content-title">{{ villageName }}</p>
            <!-- <div class="button1">
              <div
                style="width: 100%; position: relative;"
                @click="searchBuild"
              >
                <input
                  type="text"
                  id="txt"
                  style="padding-left: 10px;padding-right: 20px; box-sizing: border-box;outline: none; background:#fff; border: 1px solid #707070;  width: 100%;  height: 100%; border-radius: 24.25px;"
                  placeholder="栋"
                  readonly
                  v-model="form.buildingNo"
                  maxlength="10"
                />
                <img
                  style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 6px;  transform: translateY(-50%); "
                  src="../assets/更多@2x.png"
                />
              </div>

              <div style="width: 100%; position: relative;" @click="searchUnit">
                <input
                  type="text"
                  id="txt"
                  style="padding-left: 10px;padding-right: 20px; box-sizing: border-box;outline: none; background:#fff; border: 1px solid #707070;  width: 100%;  height: 100%; border-radius: 24.25px;"
                  placeholder="单元"
                  readonly
                  maxlength="10"
                  v-model="form.unitNo"
                />
                <img
                  style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 6px;  transform: translateY(-50%); "
                  src="../assets/更多@2x.png"
                />
              </div>

              <div
                style="width: 100%; position: relative;"
                @click="searchHourse"
              >
                <input
                  type="text"
                  id="txt"
                  style="padding-left: 10px;padding-right: 20px; box-sizing: border-box;outline: none; background:#fff; border: 1px solid #707070;  width: 100%; height: 100%; border-radius: 24.25px;"
                  placeholder="户室"
                  readonly
                  maxlength="10"
                  v-model="form.houseNumber"
                />
                <img
                  style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 6px;  transform: translateY(-50%); "
                  src="../assets/更多@2x.png"
                />
              </div>
            </div> -->

            <!-- <div class="button ">
              <input
                type="text"
                placeholder="输入姓名查询"
                class="input-button"
                v-model="form.name"
              />
              <img
                style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); "
                src="../assets/更多@2x.png"
              />
            </div> -->

            <div class="button">
              <input
                type="text"
                placeholder="输入手机号查询"
                class="input-button"
                maxlength="11"
                v-model="form.mobile"
              />
              <img
                style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); "
                src="../assets/更多@2x.png"
              />
            </div>

            <button
              style="width: 100%; background: #F4D554; outline: none; border: none; height: 2.8125rem;border-radius: 1.4rem; color: #333; font-weight: bold; font-size: 1.125rem; margin-top: 8.76875rem"
              type="button"
              @click="search"
            >
              立即查询
            </button>
          </div>
        </mt-tab-container-item>

        <mt-tab-container-item id="3">
          <div class="wrapper-search">
            <p class="content-title">{{ villageName }}</p>
            <div class="button">
              <input
                type="text"
                placeholder="输入姓名查询"
                class="input-button"
                v-model="form.name"
              />
              <img
                style="vertical-align: middle; width: 10.5px; height: 16px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); "
                src="../assets/更多@2x.png"
              />
            </div>

            <button
              style="width: 100%; background: #F4D554; outline: none; border: none; height: 2.8125rem;border-radius: 1.4rem; color: #333; font-weight: bold; font-size: 1.125rem; margin-top: 8.76875rem"
              type="button"
              @click="search"
            >
              立即查询
            </button>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>

    <mt-popup
      v-model="pickerForm.areaVisible"
      popup-transition="popup-fade"
      position="bottom"
      style="width: 100%;"
    >
      <mt-picker
        :slots="pickerForm.areaList"
        value-key="buildingNo"
        :show-toolbar="true"
        @change="selectArea"
      >
        <Slot>
          <div
            class="confirmKey flex justify-content-between font-size-9 border-box"
          >
            <div class="color-grey" @click="closePopup">取消</div>
            <div class="">{{ pickerForm.title }}</div>
            <div class="color-green" @click="sureArea">确定</div>
          </div>
        </Slot>
      </mt-picker>
    </mt-popup>

    <mt-popup
      v-model="pickerForm.areaVisible1"
      popup-transition="popup-fade"
      position="bottom"
      style="width: 100%;"
    >
      <mt-picker
        :slots="pickerForm.areaList1"
        value-key="unitNo"
        :show-toolbar="true"
        @change="selectArea1"
      >
        <Slot>
          <div
            class="confirmKey flex justify-content-between font-size-9 border-box"
          >
            <div class="color-grey" @click="closePopup1">取消</div>
            <div class="">{{ pickerForm.title }}</div>
            <div class="color-green" @click="sureArea1">确定</div>
          </div>
        </Slot>
      </mt-picker>
    </mt-popup>

    <mt-popup
      v-model="pickerForm.areaVisible2"
      popup-transition="popup-fade"
      position="bottom"
      style="width: 100%;"
    >
      <mt-picker
        :slots="pickerForm.areaList2"
        value-key="houseNumber"
        :show-toolbar="true"
        @change="selectArea2"
      >
        <Slot>
          <div
            class="confirmKey flex justify-content-between font-size-9 border-box"
          >
            <div class="color-grey" @click="closePopup2">取消</div>
            <div class="">{{ pickerForm.title }}</div>
            <div class="color-green" @click="sureArea2">确定</div>
          </div>
        </Slot>
      </mt-picker>
    </mt-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: "1",
      handler: function(e) {
        e.preventDefault();
      }, //阻止body滑动
      form: {
        buildingNo: "",
        tempbuildingNo: "",
        unitNo: "",
        tempunitNo: "",
        houseNumber: "",
        temphouseNumber: "",
        name: "",
        mobile: ""
      },
      pickerForm: {
        areaVisible: false,
        areaVisible1: false,
        areaVisible2: false,
        title: "",
        areaList: [
          {
            flex: 1,
            values: [],
            className: "slot1",
            textAlign: "center"
          }
        ],
        areaList1: [
          {
            flex: 1,
            values: [],
            className: "slot1",
            textAlign: "center"
          }
        ],
        areaList2: [
          {
            flex: 1,
            values: [
              {
                name: "1"
              },
              {
                name: "2"
              }
            ],
            className: "slot1",
            textAlign: "center"
          }
        ]
      },
      villageName: "",
      villageId: "",
      flag: false
    };
  },
  created() {
    // 获取暗号
    // this.argot = this.getUrlParam("argot");

    // alert(`暗号为: ${this.getUrlParam("argot")}`);
    // 根据暗号获取小区ID

    this.getVillageList(this.getUrlParam("argot"));
    // this.getVillageList(1750)
  },
  components: {},
  watch: {
    "pickerForm.areaVisible": function(newvs, oldvs) {
      if (newvs) {
        this.closeTouch();
      } else {
        this.openTouch();
      }
    },
    "pickerForm.areaVisible1": function(newvs, oldvs) {
      console.log(newvs, oldvs);
      if (newvs) {
        this.closeTouch();
      } else {
        this.openTouch();
      }
    },
    "pickerForm.areaVisible2": function(newvs, oldvs) {
      console.log(newvs, oldvs);
      if (newvs) {
        this.closeTouch();
      } else {
        this.openTouch();
      }
    },
    selected: function(newvs, oldvs) {
      console.log(newvs, oldvs);
      switch (newvs) {
        case "1":
          this.form.name = "";
          this.form.mobile = "";
          break;
        case "2":
          this.form.buildingNo = "";
          this.form.unitNo = "";
          this.form.houseNumber = "";
          this.form.name = "";
          break;
        case "3":
          this.form.buildingNo = "";
          this.form.unitNo = "";
          this.form.houseNumber = "";
          this.form.mobile = "";
          break;
      }
    }
  },
  methods: {
    getUrlParam: function(name) {
      var index = location.hash.indexOf("?");
      var params = decodeURIComponent(
        location.hash.slice(location.hash.indexOf("?"))
      );

      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = params.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    // 获取小区
    getVillageList(argot) {
      this.$axios
        .get("/village/household/villageArgot", {
          params: {
            argot
          }
        })
        .then(({ data: res }) => {
          console.log("小区数据", res);
          if (res.code != 0) {
            this.$toast({
              message: res.msg,
              duration: 1500
            });
            return;
          }
          this.villageName = res.data.villageName;
          this.villageId = res.data.villageId;
        });
    },
    // 选择楼栋号
    searchBuild() {
      this.$axios
        .get("/village/household/buildingNo", {
          params: {
            villageId: this.villageId
          }
        })
        .then(({ data: res }) => {
          console.log("楼栋数据", res);
          if (res.code != 0) {
            this.$toast({
              message: res.msg,
              duration: 1500
            });
            return;
          }

          if (res.data.length != 0) {
            this.pickerForm.title = "请选择楼栋号";
            this.pickerForm.areaVisible = true;
            this.pickerForm.areaList[0].values = res.data;
            this.flag = true;
          } else {
            this.$toast({
              message: "该小区暂未开通二维码服务, 敬请期待!",
              position: "middle",
              duration: 1500
            });
          }
        })
        .catch(() => {});
    },
    // 选择单元号
    searchUnit() {
      if (!this.form.buildingNo.trim()) {
        this.$toast({
          message: "请先选择楼栋号",
          duration: 1500
        });
        return;
      }

      this.$axios
        .get("/village/household/unitNo", {
          params: {
            villageId: this.villageId,
            buildingNo: this.form.buildingNo
          }
        })
        .then(({ data: res }) => {
          console.log("单元数据", res);
          if (res.code != 0) {
            this.$toast({
              message: res.msg,
              duration: 1500
            });
            return;
          }

          if (res.data.length != 0) {
            this.pickerForm.title = "请选择单元号";
            this.pickerForm.areaVisible1 = true;
            this.pickerForm.areaList1[0].values = res.data;
            this.flag = true;
          } else {
            this.$toast({
              message: "该楼栋下单元尚未开放",
              position: "middle",
              duration: 1500
            });
          }
        })
        .catch(() => {});
    },
    // 选择户室号
    searchHourse() {
      if (!this.form.unitNo.trim()) {
        this.$toast({
          message: "请先选择单元号",
          duration: 1500
        });
        return;
      }

      this.$axios
        .get("/village/household/houseNumber", {
          params: {
            villageId: this.villageId,
            buildingNo: this.form.buildingNo,
            unitNo: this.form.unitNo
          }
        })
        .then(({ data: res }) => {
          console.log("户室数据", res);
          if (res.code != 0) {
            this.$toast({
              message: res.msg,
              duration: 1500
            });
          }

          if (res.data.length != 0) {
            this.pickerForm.title = "请选择户室号";
            this.pickerForm.areaVisible2 = true;
            this.pickerForm.areaList2[0].values = res.data;
            this.flag = true;
          } else {
            this.$toast({
              message: "该单元下户室尚未开放",
              position: "middle",
              duration: 1500
            });
          }
        })
        .catch(() => {});
    },
    // 取消
    closePopup() {
      let that = this;
      that.pickerForm.areaVisible = false;
      this.form.buildingNo = this.form.tempbuildingNo;
    },

    closePopup1() {
      let that = this;
      that.pickerForm.areaVisible1 = false;
      this.form.unitNo = this.form.tempunitNo;
    },
    closePopup2() {
      let that = this;
      that.pickerForm.areaVisible2 = false;
      this.form.houseNumber = this.form.temphouseNumber;
    },
    // 确定
    sureArea() {
      let that = this;
      that.pickerForm.areaVisible = false;
      this.form.tempbuildingNo = this.form.buildingNo;
      this.form.unitNo = "";
      this.form.houseNumber = "";
    },
    sureArea1() {
      let that = this;
      that.pickerForm.areaVisible1 = false;
      this.form.tempunitNo = this.form.unitNo;
      this.form.houseNumber = "";
    },
    sureArea2() {
      let that = this;
      that.pickerForm.areaVisible2 = false;
      this.form.temphouseNumber = this.form.houseNumber;
    },
    // 滑动
    selectArea(picker, values) {
      // document.querySelector(".picker-item.picker-selected").style.color =
      //   "red";
      console.log(picker, values);
      if (this.flag) {
        this.form.buildingNo = values[0].buildingNo;
        this.form.unitNo = "";
        this.form.houseNumber = "";
      }
    },
    selectArea1(picker, values) {
      console.log(picker, values);
      if (this.flag) {
        this.form.unitNo = values[0].unitNo;
        this.form.houseNumber = "";
      }
    },
    selectArea2(picker, values) {
      console.log(picker, values);
      if (this.flag) {
        this.form.houseNumber = values[0].houseNumber;
      }
    },
    search() {
      if (this.form.houseNumber.trim()) {
        this.$axios
          .get("/village/household/one", {
            params: {
              villageId: this.villageId,
              buildingNo: this.form.buildingNo,
              unitNo: this.form.unitNo,
              houseNumber: this.form.houseNumber
            }
          })
          .then(({ data: res }) => {
            console.log("查询结果为", res);
            if (res.code != 0) {
              this.$toast({
                message: res.msg,
                duration: 1500
              });

              this.form.buildingNo = "";
              this.form.unitNo = "";
              this.form.houseNumber = "";
              this.form.name = "";
              this.form.mobile = "";

              // 流程2: 查询失败
              this.$router.push({
                path: "/failed"
              });
            }
            // 流程1: 查询成功 直接显示二维码
            this.$router.push({
              path: "/qrcode",
              query: {
                data: JSON.stringify(res.data)
                // argot: this.getUrlParam("argot")
              }
            });

            this.form.buildingNo = "";
            this.form.unitNo = "";
            this.form.houseNumber = "";
            this.form.name = "";
            this.form.mobile = "";
          })
          .catch(() => {});

        return;
      }

      if (
        !this.form.houseNumber.trim() &&
        !this.form.name.trim() &&
        !this.form.mobile.trim()
      ) {
        this.$toast({
          message: "请填写查询条件",
          position: "middle",
          duration: 1500
        });
        return;
      }

      if (
        this.form.mobile.trim() &&
        !/^1[3456789]\d{9}$/.test(this.form.mobile)
      ) {
        this.$toast({
          message: "手机号码有误，请重填!",
          position: "middle",
          duration: 1500
        });
        return;
      }

      this.$axios
        .get("/village/household/householdByUser", {
          params: {
            mobile: this.form.mobile ? this.form.mobile : "",
            name: this.form.name ? this.form.name : "",
            villageId: this.villageId
          }
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            this.$toast({
              message: res.msg,
              duration: 1500
            });

            this.form.buildingNo = "";
            this.form.unitNo = "";
            this.form.houseNumber = "";
            this.form.name = "";
            this.form.mobile = "";
            console.log(this.$router.history.current);
            // 流程2: 查询失败
            this.$router.push({
              path: "/failed"
            });
            return;
          }

          // 流程1: 查询成功 直接显示二维码
          this.$router.push({
            path: "/qrcode",
            query: {
              data: JSON.stringify(res.data)
              // argot: this.getUrlParam("argot")
            }
          });

          this.form.buildingNo = "";
          this.form.unitNo = "";
          this.form.houseNumber = "";
          this.form.name = "";
          this.form.mobile = "";
        })
        .catch(() => {});
    },
    closeTouch: function() {
      document
        .getElementsByTagName("body")[0]
        .addEventListener("touchmove", this.handler, { passive: false }); //阻止默认事件
    },
    openTouch: function() {
      document
        .getElementsByTagName("body")[0]
        .removeEventListener("touchmove", this.handler, { passive: false }); //打开默认事件
    }
  }
};
</script>
<style lang="scss">
.picker-selected {
  color: #327eff !important;
}
.query {
  height: 100%;
  background-image: linear-gradient(#205fff, #52b3ff);
  overflow: hidden;
  text-align: center;
}
.title {
  margin: 0;
  margin: 0 auto;
  margin-top: 2.53125rem;
  padding: 0;
  color: #fff;
  font-size: 3.5rem;
}
.subTitle {
  margin: 0;
  padding: 0;
  color: #fff;
  letter-spacing: 0.2rem;
  font-size: 1.875rem;
}

.wrapper {
  width: 20.625rem;
  margin: 0 auto;
  margin-top: 1.59375rem;
  // position: relative;
  // display: flex;
  // flex-direction: column;
  // justify-content: flex-start;
}
.wrapper-search {
  width: 20.625rem;
  height: 18.525rem;
  background: #fff;

  // margin: 0 auto;
  // margin-top: 1.59375rem;
  // margin-top: 1px;
  overflow: hidden;
  padding: 0 1rem;
  box-sizing: border-box;
}

.mint-navbar {
  // width: 14.75rem;
  // position: absolute;
  width: 100%;
}
.mint-tab-item {
  font-weight: Bold;
}
.mint-tab-item-label {
  font-size: 18px;
}
.mint-navbar .mint-tab-item.is-selected {
  // border-bottom: 1px solid #999;
  border-bottom: none;
  color: #317bff;
  font-weight: normal;
  // border-bottom: 1px solid #999999;
  margin-bottom: 0;
  position: relative;
}
.mint-navbar .mint-tab-item.is-selected::after {
  content: "";
  display: inline-block;
  width: 2.9375rem;
  height: 0.1875rem;
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  transform: translate(-50%);
  background: #327eff;
}
.mint-navbar {
  border-bottom: 1px solid #999;
}
.mint-navbar .mint-tab-item:first-of-type {
  border-right: 1px solid #999;
}
.mint-navbar .mint-tab-item:nth-of-type(2) {
  border-right: 1px solid #999;
}
.content-title {
  color: #333;
  margin: 0;
  padding: 0;
  margin-top: 0.875rem;
}

#txt {
  font-size: 17px;
  color: #333;
  padding: 0;
}
.button1 {
  width: 100%;
  height: 2.8125rem;
  border-radius: 24.25px;
  margin-bottom: 10px;
  text-align: left;
  color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 17px;
  position: relative;

  margin-top: 1.0625rem;
}
.button {
  width: 100%;
  height: 2.8125rem;
  line-height: 2.8125rem;
  border-radius: 24.25px;
  background-color: #fff;
  border: 1px solid #707070;
  margin-top: 20px;
  text-align: left;
  color: #333;

  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 17px;
  position: relative;
}
.input-button {
  border: none;
  outline: none;
  color: #000;
  font-size: 1.125rem;
  line-height: 1.125rem;
  border-radius: 24.25px;
  padding-left: 1.4rem;
  width: 100%;
  padding-right: 40px;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;
  font-size: 1.125rem;

  line-height: 1.125rem;
}

　　　　input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999;
  　　　　font-size: 1.125rem;

  line-height: 1.125rem;
}

　　　　input::-moz-placeholder,
textarea::-moz-placeholder {
  　　　　color: #999;
  　　　　font-size: 1.125rem;

  line-height: 1.125rem;
}
　　　　input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  　　　　color: #999;
  　　　　font-size: 1.125rem;

  line-height: 1.125rem;
}

.flex {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

input {
  -webkit-appearance: none;
}
</style>
